<template>
    <section class="intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
            <el-form :inline="true" :model="form2" class="demo-form-inline" >
                <el-form-item >
                    <el-button 
                        style="margin-left: unset;" 
                        @click="clickDaochu" 
                        class="diy_marage" 
                        type="primary" 
                        icon="el-icon-upload2">
                            导出
                    </el-button>
                </el-form-item>
                <el-form-item >
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        class="diy_marage" 
                        v-model="form2.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input  v-model="form2.resourceServiceName" placeholder="请输入内容">
                        <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table
                :data="tableData"
                style="width: 100%"
                stripe 
                :header-cell-style="{background:'#cae4fe',color: '#000'}"
                :cell-style="{border:'none'}"
            >
                <el-table-column
                    fixed
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    fixed
                    prop="name"
                    label="服务名称"
                    width="150">
                </el-table-column>
                <el-table-column
                    align="center"
                    v-for="(val,key) in tableLabel"
                    :prop="key"
                    :label="val"
                    width="150"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <p @click="checkBao(scope)" class="clickStyle">
                            查看报文
                        </p>
                        <p @click="checkError(scope)" class="clickStyle">
                            失败条件
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <p style="margin-top: 15px;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
            </p>
      
            <el-dialog
                title=""
                :visible.sync="dialogVisibleDaochu"
                width="30%"
                class=""
            >
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="导出方式">
                        <el-select v-model="form.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>

                    <el-form-item label="导出文件类型">
                        <el-select v-model="form.region1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">确定</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
      
            <el-dialog
                title="查看报文"
                :visible.sync="dialogVisibleBao"
                width="50%"
                class="diy-dialog"
                :append-to-body="true"
            >
                <check-bao></check-bao>
            </el-dialog>
        </div>
    </section>
</template>

<script>
    import {
        computedResourceSearch,
    } from "./css_js_img/computedareaResource"
    import checkBao from "./components/checkBao"
    export default {
        components:{
            checkBao
        },
        data() {
          return {
                    form2:{
                        resourceServiceName:'',
                        time:'',
                        pageNum:1,
                        pageSize:10,
                        serviceType:2,
                        startTime:'',
                        endTime:'',
                    },
                    form:{
                        region:'',
                        region1:'',
                    },
                    total:0,
                    dialogVisibleDaochu:false,
                    dialogVisibleBao:false,
                    input21:'',
                    value7:'',
                    tableLabel:{
                        id:'记录标识',
                        segmentName:'所属网段',
                        areaName:'所属区域',
                        inServiceDatasourceType:'数据来源方式',
                        outServiceDatasourceType:'数据保存方式',
                        outConnDatasourceName:'数据保存目的地',
                        startTime:'开始时间',
                        endTime    :'结束时间',
                        gatherMode:'采集方式',
                        gatherNum:'采集结果',
                        responseStatus:'采集数量(条)',
                        useFlowSize:'使用流量'
                    },
                       tableData: []
          };
        },
        methods: {
            checkBao(scope){
                console.log(scope);
                this.dialogVisibleBao =true;
            },
            checkError(scope){
                console.log(scope);
            },
            clickDaochu(){
                this.dialogVisibleDaochu = true;
            },
            search(){
                 this.form2.startTime= this.form2[0];
                 this.form2.endTime= this.form2[1];
                 computedResourceSearch(this,this.form2);
            },
            handleCurrentChange(val){
                 this.form2.pageNum = val;
            }
        },
        mounted(){
            this.search();  
        }
  };
</script>

<style scoped="scoped">
    /*section.collect_server_ri{
        background: #fff;
        padding: 15px;
    }
    .diy_marage{
        margin: 0 5px 15px 5px;
    }*/
    .clickStyle{
        cursor: pointer;
    }
    @keyframes dialog-fade-in {
    0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    }
    100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }
    }
    @keyframes dialog-fade-out {
    0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }
    100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    }
    }
</style>